<template>
    <div class="login_container">
        <div class="background">
            <img :src="imgSrc" width="100%" height="100%" alt="" />
        </div>
        <div class="login_box">
            <div class="avatar_box">
                <img src="@/assets/img/Blogo.png"/>
            </div>
            <div class="form-box">
                <!-- :label-position 对齐-->
                <!-- ref 指定-->
                <!-- :model 绑定数据-->
                <!-- label-width 标签间距 -->
                <!-- :rules 绑定验证规则 -->
                <el-form
                        :label-position="labelPosition"
                        ref="form"
                        :model="form"
                        :rules="loginFormRules"
                        label-width="0px"
                        class="login_form"
                >
                    <!--输入用户名-->
                    <el-form-item prop="userCode">
                        <!-- prefix-icon 输入框首部图标 -->
                        <!-- suffix-icon 输入框尾部图标 -->
                        <el-input
                                prefix-icon="el-icon-user"
                                placeholder="请输入用户编号"
                                v-model="form.userCode"
                        ></el-input>
                    </el-form-item>

                    <!--输入用户密码-->
                    <el-form-item prop="userPass">
                        <el-input
                                prefix-icon="el-icon-key"
                                placeholder="请输入用户密码"
                                v-model="form.userPass"
                                :type="passShow"
                        >
                            <!-- 可以用 slot="xxx" 的形式代替prefix-icon -->
                            <i slot="suffix" :class="passShowIcon" @click="showPass"></i>
                        </el-input>
                    </el-form-item>

                    <!--两个按钮-->
                    <el-form-item class="btns">
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="info" @click="resetLogin">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                labelPosition: 'right',
                imgSrc:require("@/assets/img/load_5.jpg"),
                passShow:"password",
                passShowIcon:"el-input__icon el-icon-lock",
                form: {
                    userCode: "",
                    userPass: ""
                },

                //验证规则
                loginFormRules: {
                    userCode: [
                        {required: true, message: "用户编号必填，测试0000", trigger: "blur"},
                        //blue鼠标离开触发验证
                        {
                            min: 4,
                            max: 8,
                            message: "用户编号在4到8个字符之间",
                            trigger: "blur"
                        }
                    ],
                    userPass: [
                        {required: true, message: "用户密码必填，测试123456", trigger: "blur"},
                        {
                            min: 4,
                            max: 8,
                            message: "用户密码在4到8个字符之间",
                            trigger: "blur"
                        }
                    ]
                }
            };
        },
        methods: {
            showPass(){
                if (this.passShow=="password") {
                    this.passShow="text";
                    this.passShowIcon="el-input__icon el-icon-unlock";
                }else {
                    this.passShow="password";
                    this.passShowIcon="el-input__icon el-icon-lock";
                }
            },
            resetLogin() {
                this.$refs.form.resetFields();
            },
            login() {
                this.$refs.form.validate(valid => {
                    //如果是false，则不进行
                    if (!valid) return;

                    this.$api.login.doLogin( this.form)
                        .then((res) => {
                        // console.log(res);
                        if (res.status != 200) {
                            this.$message.error("登录失败");
                        } else {
                            //this.$message.success("登录成功");

                            sessionStorage.setItem("userCode",this.form.userCode);
                            //微服务里不能这样做，因为分布式里不共享彼此的sessionStorage
                            //分布式里用注册中心 单点登录token  jwt
                            //sessionStorage.setItem("accToken", "noChinese");
                            // 不能使用中文,已经在http.js中的相应拦截函数中，把返回的token放在sessionStorage


                            // this.getRefData();
                            if (res.data.code=="200"){
                                this.$router.push("/home");
                            }else {
                                this.$message.error(res.data.msg);
                            }
                        }
                    });
                });
            },
            login2() {
                this.$refs.form.validate(valid => {
                    if (!valid) return;

                    let url = "http://localhost:8083/manager/login"
                    let params = this.qs.stringify(this.form);
                    this.axios.post(url, params)
                        .then((res) => {
                            if (res.data.code == 200) {
                                this.$message.success("登陆成功")
                                //登陆成功  存放session
                                sessionStorage.setItem("userCode", this.form.employeeCode);
                                this.$router.push("/home")
                            } else {
                                this.$message.success("登陆失败 ")
                            }
                        })
                });
            },
            // getRefData() {
            //   this.$api.refdata.getBusinessType().then(res => {
            //     console.log(res);
            //     if (res.data.code !== "0000") {
            //       this.$message.error("查询参数列表[BUSINESS_SOURCE]失败");
            //     } else {
            //       sessionStorage.setItem(
            //         "BUSINESS_SOURCE",
            //         JSON.stringify(res.data.result)
            //       );
            //     }
            //   });
            //   this.$api.refdata.getCustomerType().then(res => {
            //     console.log(res);
            //     if (res.data.code !== "0000") {
            //       this.$message.error("查询参数列表[CUSTOMER_TYPE]失败");
            //     } else {
            //       sessionStorage.setItem(
            //         "CUSTOMER_TYPE",
            //         JSON.stringify(res.data.result)
            //       );
            //     }
            //   });
            //   this.$api.refdata.getGender().then(res => {
            //     console.log(res);
            //     if (res.data.code !== "0000") {
            //       this.$message.error("查询参数列表[GENDER]失败");
            //     } else {
            //       sessionStorage.setItem("GENDER", JSON.stringify(res.data.result));
            //     }
            //   });
            //   this.$api.refdata.getGasType().then(res => {
            //     console.log(res);
            //     if (res.data.code !== "0000") {
            //       this.$message.error("查询参数列表[GAS_TYPE]失败");
            //     } else {
            //       sessionStorage.setItem("GAS_TYPE", JSON.stringify(res.data.result));
            //     }
            //   });
            //   this.$api.refdata.getIdType().then(res => {
            //     console.log(res);
            //     if (res.data.code !== "0000") {
            //       this.$message.error("查询参数列表[ID_TYPE]失败");
            //     } else {
            //       sessionStorage.setItem("ID_TYPE", JSON.stringify(res.data.result));
            //     }
            //   });
            //   this.$api.refdata.getImportType().then(res => {
            //     console.log(res);
            //     if (res.data.code !== "0000") {
            //       this.$message.error("查询参数列表[IMPORT_TYPE]失败");
            //     } else {
            //       sessionStorage.setItem(
            //         "IMPORT_TYPE",
            //         JSON.stringify(res.data.result)
            //       );
            //     }
            //   });
            //   this.$api.refdata.getLicenseType().then(res => {
            //     console.log(res);
            //     if (res.data.code !== "0000") {
            //       this.$message.error("查询参数列表[LICENSE_TYPE]失败");
            //     } else {
            //       sessionStorage.setItem(
            //         "LICENSE_TYPE",
            //         JSON.stringify(res.data.result)
            //       );
            //     }
            //   });
            //   this.$api.refdata.getPolicyStatus().then(res => {
            //     console.log(res);
            //     if (res.data.code !== "0000") {
            //       this.$message.error("查询参数列表[POLICY_STATUS]失败");
            //     } else {
            //       sessionStorage.setItem(
            //         "POLICY_STATUS",
            //         JSON.stringify(res.data.result)
            //       );
            //     }
            //   });
            //   this.$api.refdata.getVehicleKind().then(res => {
            //     console.log(res);
            //     if (res.data.code !== "0000") {
            //       this.$message.error("查询参数列表[VEHICLE_KIND]失败");
            //     } else {
            //       sessionStorage.setItem(
            //         "VEHICLE_KIND",
            //         JSON.stringify(res.data.result)
            //       );
            //     }
            //   });
            //   this.$api.refdata.getUseNature().then(res => {
            //     console.log(res);
            //     if (res.data.code !== "0000") {
            //       this.$message.error("查询参数列表[USE_NATURE]失败");
            //     } else {
            //       sessionStorage.setItem("USE_NATURE", JSON.stringify(res.data.result));
            //     }
            //   });
            // }
        }
    };
</script>
<style lang="less" scoped>
    .login_container {
        /*background-color: #2b4b6b;*/
        height: 100%;
    }
    .background {
        width:100%;
        height:100%;  /**宽高100%是为了图片铺满屏幕 **/
        z-index:-1;
        position: absolute;
    }
    .login_box {
        z-index:1;
        width: 450px;
        height: 300px;
        /*background-color: #fff;*/

        background-color: rgba(86, 102, 107, 0.5);
        /*内容不透明*/

        /*opacity: 0.8;*/
        /*内容透明*/

        border-radius: 15px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .avatar_box {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 1px solid #eee;
            padding: 5px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -30%);
            background-color: #fff;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }
    }
    .btns {
        display: flex;
        justify-content: flex-end;
    }
    .login_form {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
</style>